<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
<div class="aside-body" ng-show="content">
    <div class="p-md clear">
        <div class="panel-body advert-select" style="padding-top:0">
            <select name="crtSizeMediumMenuId" id="crtSizeMediumMenuIds" class="form-control w">
                <option value="0">全部尺寸</option>
                <c:forEach items="${form.crtSizeMediumMenus }" var="crtSizeMediumMenu">
                    <option value="${crtSizeMediumMenu.crtSize}"  <c:if
                            test="${form.crtSizeMediumMenuId == crtSizeMediumMenu.crtSize }"> selected="selected"</c:if>>${crtSizeMediumMenu.crtSizeDetail}</option>
                </c:forEach>
            </select>
            <input id="frontCompanyType" type="hidden" value="${form.sitesetType }"/>
        </div>

        <!-- 新增 -->
        <c:forEach items="${form.page.content }" var="frontSelfOperateCreative">
            <c:if test="${frontSelfOperateCreative.type == 1 }">
                <div class="cy-item col-sm-4">
                    <div class="panel b-a cy-materials-item" name="creativeSelect">
                        <input type="hidden" value="${frontSelfOperateCreative.id}"/>
                        <div class="panel-heading bg text-lt">
                            <span>${frontSelfOperateCreative.creativeName}</span>
                        </div>
                        <div class="content">
                            <div class="sb">
                                    <img src="${frontSelfOperateCreative.trademarkShowPath}" class="sb-icon">
                                <span class="sb-name">${frontSelfOperateCreative.trademarkName}</span>
                            </div>
                            <p class="cy-txt">
                                    ${frontSelfOperateCreative.creativeCopywriter}
                            </p>
                            <c:choose>
                                <c:when test="${empty frontSelfOperateCreative.bannerPath2 }">
                                    <div class="cy-img-list one">
                                        <a href="javascript:;"> <img src="${frontSelfOperateCreative.bannerShowPath1}"></a>
                                    </div>
                                </c:when>
                                <c:otherwise>
                                    <div class="cy-img-list three">
                                        <a href="javascript:;"><img src="${frontSelfOperateCreative.bannerShowPath1}"></a>
                                        <a href="javascript:;"><img src="${frontSelfOperateCreative.bannerShowPath2}"></a>
                                        <a href="javascript:;"><img src="${frontSelfOperateCreative.bannerShowPath3}"></a>
                                    </div>
                                </c:otherwise>
                            </c:choose>
                        </div>
                    </div>
                </div>
            </c:if>
            <c:if test="${frontSelfOperateCreative.type == 4 }">
                <div class="cy-item col-sm-4">
                    <div class="panel b-a cy-materials-item" name="creativeSelect">
                        <input type="hidden" value="${frontSelfOperateCreative.id}"/>
                        <div class="panel-heading bg text-lt">
                            <span>${frontSelfOperateCreative.creativeName}</span>
                        </div>
                        <div class="content">
                            <div class="cy-img-list one mt">
                                    <img src="${frontSelfOperateCreative.bannerShowPath1}">
                            </div>
                        </div>
                    </div>
                </div>
            </c:if>
            <c:if test="${frontSelfOperateCreative.type == 5 }">
                <div class="cy-item col-sm-4">
                    <div class="panel b-a cy-materials-item" name="creativeSelect">
                        <input type="hidden" value="${frontSelfOperateCreative.id}"/>
                        <div class="panel-heading bg text-lt">
                            <span>${frontSelfOperateCreative.creativeName}</span>
                        </div>
                        <div class="content">
                            <div class="sb">
                                <span class="sb-name">${frontSelfOperateCreative.trademarkName}</span>
                            </div>
                            <p class="cy-txt">
                                    ${frontSelfOperateCreative.creativeCopywriter}
                            </p>
                            <c:choose>
                                <c:when test="${empty frontSelfOperateCreative.bannerPath2 }">
                                    <div class="cy-img-list one">
                                         <a href="javascript:;"> <img src="${frontSelfOperateCreative.bannerShowPath1}"></a>
                                    </div>
                                </c:when>
                                <c:otherwise>
                                    <div class="cy-img-list three">
                                        <a href="javascript:;"><img src="${frontSelfOperateCreative.bannerShowPath1}"></a>
                                        <a href="javascript:;"><img src="${frontSelfOperateCreative.bannerShowPath2}"></a>
                                        <a href="javascript:;"><img src="${frontSelfOperateCreative.bannerShowPath3}"></a>
                                    </div>
                                </c:otherwise>
                            </c:choose>
                        </div>
                    </div>
                </div>
            </c:if>
            <c:if test="${frontSelfOperateCreative.type == 3 }">
                <div class="cy-item col-sm-4">
                    <div class="panel b-a cy-materials-item" name="creativeSelect">
                        <input type="hidden" value="${frontSelfOperateCreative.id}"/>
                        <div class="panel-heading bg text-lt">
                            <span>${frontSelfOperateCreative.creativeName}</span>
                        </div>
                        <div class="content">
                            <div class="sb no-lineHeight">
                                    <img src="${frontSelfOperateCreative.shareShowPath}" class="sb-icon">
                                <div class="sb-name-container have-desc-sbName">
                                    <p class="sb-name">${frontSelfOperateCreative.shareTitle}</p>
                                    <p class="sb-desc">${frontSelfOperateCreative.shareDescribe}</p>
                                </div>
                            </div>
                            <p class="cy-txt">
                                    ${frontSelfOperateCreative.creativeCopywriter}
                            </p>
                            <div class="cy-img-list one">
                                <a href="javascript:;"> <img src="${frontSelfOperateCreative.bannerShowPath1}"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </c:if>
            <c:if test="${frontSelfOperateCreative.type == 2 }">
                <div class="cy-item col-sm-4">
                    <div class="panel b-a cy-materials-item" name="creativeSelect">
                        <input type="hidden" value="${frontSelfOperateCreative.id}"/>
                        <div class="panel-heading bg text-lt">
                            <span>${frontSelfOperateCreative.creativeName}</span>
                        </div>
                        <div class="content">
                            <p class="cy-txt mt">
                                    ${frontSelfOperateCreative.creativeCopywriter}
                            </p>
                            <div class="cy-img-list one mt">
                                <a href="javascript:;"> <img src="${frontSelfOperateCreative.bannerShowPath1}"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </c:if>
        </c:forEach>
    </div>
    <!-- 分页 -->
    <div class="text-center">
        <airad:pagination pageSize="${form.page.pageSize }"
                          href=" javascript:creativesPage(PAGENUM,'${form.crtSize}','${form.sitesetType }')"
                          totalRecord="${form.page.totalCount }"
                          currentPage="${form.page.pageNumber }"
        >
        </airad:pagination>
    </div>
</div>
<script type="text/javascript">
    $().ready(function () {
        $("div[name=showOrhide]").hover(over, out)
        function over() {
            $(this).find("span").show()
        }

        function out() {
            $(this).find("span").hide();
        }
        //编辑广告,已经选择的创意显示高亮
        $("#creativesInputs").find("input[name='creativesId']").each(function () {
            var cid = $(this).val();
            $("#creativesList").find("div[name=creativeSelect]").each(function(){
                var id = $(this).find("input[type='hidden']").val();
                if(parseInt(cid) == parseInt(id)){
                    $(this).removeClass("b-a");
                    $(this).addClass("b-success");
                }
            });
        });
        //根据尺寸查询
        $("#crtSizeMediumMenuIds").change(function () {
            creativesPage(1,$(this).val(),$("#frontCompanyType").val());
        })

        //创意高亮
        $("div[name=creativeSelect]").hover(
            function () {
                $(this).addClass("b-info");
            },
            function () {
                $(this).removeClass("b-info");
            }
        );

        //选择创意
        $("div[name=creativeSelect]").click(function () {
            //获得该标签下隐藏的创意id
            var cid = $(this).find("input").val();
            console.log(cid);
            if ($(this).hasClass("b-success")) {
                $(this).removeClass("b-success");
                $(this).addClass("b-a");
                // 移除input的标签
                $("#id-" + cid).remove();
            } else {
                console.log($("#creativesInputs").html())
                console.log($("#creativesInputs").find("input[name='creativesId']").length);
                if ($("#creativesInputs input[name='creativesId']").length > 5) {
                    alert("一个广告下最多只能选择6条创意")
                    return
                }
                $(this).removeClass("b-a");
                $(this).addClass("b-success");
                var input = "<input id='id-" + cid + "' name='creativesId'  type='hidden' value='" + cid + "'/>";
                //添加创意
                $("#creativesInputs").append(input);
            }
        });
    })
    //分页查询
    function creativesPage(pageNumber,crtSize,sitesetType){
        $.ajax({
            url: "/ajax/front_creatives/select/"+sitesetType+"?pageNumber=" +pageNumber+"&crtSizeMediumMenuId="+crtSize,
            type: "GET",
            dataType: "html",
            cache: false,
            success: function(crreatives) {
                $("#creativesList").html(crreatives);
            }
        });
    }
</script>